<template>
  <el-card>
    <el-row style="text-align: center;">
      <el-button @click="goBack" type="info" size="small" round>返回</el-button>
    </el-row>
    <el-row>
      <el-col :span="12" style="text-align:left">
        <span style="font-family:Microsoft;font-size: 15px;font-weight: bold;">用户信息</span>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-dropdown @command="handleCommand">
          <span><i class="joys-icon-fusionmenu"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="edit">编辑</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-form :model="form" ref="formName" inline style="background-color: #F4F8F9">
      <el-row>
        <el-col :md="8" :lg="6">
          <el-form-item label="编码" style="text-align: left" prop="userCode"
                        :rules="[{ required: true, message: '请输入编码', trigger: 'blur' }]">
            <span v-if="!editable">{{this.form.userCode}}</span>
            <el-autocomplete style="width: 100%"
                             v-if="editable"
                             v-model="form.userCode"
                             :fetch-suggestions="querySearchAsync"
                             placeholder="请输入内容"
                             @select="handleSelect"
            >
              <template slot-scope="{ item }">
                <span style="float: left">{{ item.value }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userName }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="名称" style="text-align: left" prop="userName"
                        :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
            <ft-input :editable="editable" v-model="form.userName"></ft-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="出生日期" style="text-align: left" prop="birthDate">
            <span v-if="!editable">{{form.birthDate}}</span>
            <el-date-picker
              v-if="editable"
              v-model="form.birthDate"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy - MM - dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="性别" style="text-align: left" prop="sex">
            <ft-radio-group v-model="form.sex" service-name="joys-master-data" type-name="sex"
                            :editable="editable"></ft-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="8" :lg="6">
          <el-form-item label="证件类型" style="text-align: left" prop="identityType">
            <ft-enum-select v-model="form.identityType" service-name="joys-master-data"
                            type-name="personCertificateType"
                            :editing="editable"/>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="证件号码" style="text-align: left" prop="identityNo">
            <ft-input :editable="editable" v-model="form.identityNo"></ft-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="手机号码" style="text-align: left" prop="mobilePhone"
                        :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },
                        { type: 'number', message: '手机号码必须为数字值'}]">
            <ft-input :editable="editable" v-model.number="form.mobilePhone"></ft-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="电子邮箱" style="text-align: left" prop="mail"
                        :rules="[
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
            <ft-input :editable="editable" v-model="form.mail"></ft-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="8" :lg="6">
          <el-form-item label="办公电话" style="text-align: left" prop="officePhone">
            <!--<ft-input :editable="editable" v-model="form.officePhone"></ft-input>-->
            <div v-if="!editable">
              <span>{{this.areaCode}}</span>
              <span style="width: 32px;display: inline-block;font-size: 14px;text-align: center">-</span>
              <span>{{this.officePhone}}</span>
            </div>
            <div style="font-size: 0px" v-if="editable">
              <el-input style="width: calc(25% - 16px)" v-model="areaCode"></el-input>
              <span style="width: 32px;display: inline-block;font-size: 14px;text-align: center">-</span>
              <el-input style="width: calc(75% - 16px)" v-model="officePhone"></el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="部门" style="text-align: left" prop="officePhone">
            <el-tag
              :key="dept.deptId"
              v-for="dept in dataDept"
              :disable-transitions="false"
              @close="handleClose(dept)">
              {{dept.deptName}}
            </el-tag>
            <i class="joys-icon-addagain" v-if="editable" @click="showDeptDialog"></i>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="角色" style="text-align: left" prop="officePhone">
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="头像" style="text-align: left" prop="headImgSrc">
            <user-head v-model="form.headImgSrc" :user-id="form.userId"></user-head>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right;margin-top: 10px" v-if="editable">
      <el-button @click="cancel" size="small">取消</el-button>
      <el-button @click="reset" size="small">重置</el-button>
      <el-button @click="save" type="primary" size="small">保存</el-button>
    </div>
    <user-dept-choice :user-id="form.userId" :org-id="orgId" ref="userDeptRef"
                      @closeDialog="loadDept"></user-dept-choice>
  </el-card>
</template>

<script>
  import FtRadioGroup from "../org/FtRadioGroup";
  import FtUserHead from "./UserHead/FtUserHead";
  import UserHead from "./UserHead";
  import UserDeptChoice from "./UserDeptChoice";

  export default {
    name: "UserDetail",
    components: {UserDeptChoice, UserHead, FtUserHead, FtRadioGroup},
    props: {
      userId: {
        type: String
      },
      orgId: {
        type: String
      },
      editable: {
        type: Boolean,
        default: false
      }
    },
    mounted() {
      this.load()
    },
    data() {
      return {
        form: {status: 'INIT', headImgSrc: null},
        areaCode: null,
        officePhone: null,
        users: [],
        dataDept: []
      }
    },
    methods: {
      goBack() {
        this.$emit("returnValue", {status: 'user-list', orgId: this.orgId});
      },
      load() {
        if (this.userId) {
          this.$http.get('/joys-rest/joys-master-data/users/' + this.userId).then(resp => {
            this.form = resp.body
            this.userTranslate()
            this.loadDept()
          }, resp => {
            this.$message.error(resp.body.message)
          })
        }
      },
      loadDept() {
        if (this.form) {
          this.dataDept = []
          this.$http.get('/joys-rest/joys-master-data/userDepts/query/dept/' + this.form.userId).then(resp => {
            this.dataDept = resp.body
          }, resp => {
            this.$message.error(resp.body.message)
          })
        }
      },
      userTranslate() {
        if (this.form.officePhone) {
          let officePhones = this.form.officePhone.split('-')
          this.areaCode = officePhones[0]
          if (officePhones.length > 1) {
            this.officePhone = officePhones[1]
          }
        }
        if (this.form.mobilePhone) {
          this.form.mobilePhone = Number(this.form.mobilePhone)
        }
      },
      cancel() {
        if (this.form.userId) {
          this.$http.get('/joys-rest/joys-master-data/users/' + this.form.userId).then(resp => {
            this.editable = false;
            this.form = resp.body
            this.userTranslate()
          }, resp => {
            this.$message.error(resp.body.message)
          })
        } else {
          this.editable = false;
          this.form = {}
        }
      },
      reset() {
        this.form = {status: 'INIT'}
        this.areaCode = null
        this.officePhone = null
      },
      save() {
        this.$refs.formName.validate((valid) => {
          if (valid) {
            if (this.areaCode) {
              this.form.officePhone = this.areaCode + '-' + this.officePhone
            }
            this.form.orgId = this.orgId
            this.$http.post('/joys-rest/joys-master-data/users/saveUser', this.form).then(resp => {
              this.editable = false
              this.form = resp.body
              this.$message.success('操作成功！')
            }, resp => {
              this.$message.error(resp.body.message)
            })
          } else {
            console.log('error submit!!')
            return false;
          }
        })
      },
      handleCommand() {
        this.editable = true
      },
      querySearchAsync(queryString, cb) {
        if (queryString) {
          const url = '/joys-rest/joys-master-data/users/query'
          this.$http.post(url, queryString, {
            params: {pageIndex: 1, pageSize: 10},
            headers: {'Content-Type': 'text/plain'}
          }).then(resp => {
              var user = []
              resp.body.rows.forEach((item, index) => {
                user.push({value: item.userCode, userName: item.userName, userId: item.userId})
              })
              cb(user)
            }, resp => {
              this.$message.error(resp.body.message)
            }
          )
        } else {
          cb(null)
        }
      },
      handleSelect(item) {
        if (item.userId) {
          this.$http.get('/joys-rest/joys-master-data/users/' + item.userId).then(resp => {
            this.form = resp.body
            this.userTranslate()
          }, resp => {
            this.$message.error(resp.body.message)
          })
        }
      },
      selectImg(value) {
        this.form.headImgSrc = value
      },
      showDeptDialog() {
        if (this.form) {
          this.$refs.userDeptRef.dialogVisible = true
          this.$refs.userDeptRef.dataAll = []
          this.$refs.userDeptRef.load()
        } else {
          this.$message.warning('请先保存用户信息！')
        }
      }
    }
  }
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
